<script setup lang="ts">
import { ElButton, ElInput, ElRadio, ElRadioGroup } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const radioRefund = ref(false)

const router = useRouter()

function goBack() {
    router.push('/trade-center/good-room/intentional-deposit')
}
function confirm() {
    goBack()
}
</script>

<template>
    <div class="refund">
        <div>
            <ElButton size="small"
                      @click="goBack"
            >
                返回列表
            </ElButton>
        </div>

        <div class="refund-main">
            <div class="mr-t">
                <p class="ck">
                    操作备注
                </p>

                <ElInput type="textarea"
                         :rows="4"
                         style="width:1002px"
                />
            </div>

            <p class="mr-t">
                <span>意向金订单金额：</span>

                <span>￥20000</span>
            </p>

            <div class="mr-t">
                <p class="ck">
                    确认退款金额
                </p>

                <ElInput type="text"
                         style="width:450px"
                />元
            </div>

            <div class="mr-t">
                <p class="ck">
                    退款方式
                </p>

                <ElRadioGroup v-model="radioRefund"
                              class="ml-4"
                >
                    <ElRadio value="1"
                             size="large"
                    >
                        退回原支付渠道
                    </ElRadio>

                    <ElRadio value="2"
                             size="large"
                    >
                        生成退款申请
                    </ElRadio>
                </ElRadioGroup>
            </div>
        </div>

        <div>
            <ElButton color="#DA0004"
                      size="small"
                      @click="confirm"
            >
                确定
            </ElButton>

            <ElButton size="small"
                      @click="goBack"
            >
                取消
            </ElButton>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .refund {
    background: #fff;
    padding: 20px;

    .refund-main {
        // height: 450px;
        margin: 20px 0;
        padding: 20px;
        font-size: 16px;
        color: #1d2129;
    }

    .mr-t {
        margin-bottom: 20px;
    }
}

.ck::after {
    content: '*';
    color: #da0004;
}
</style>
